<template>
  <div class="demo">
    <button @click="addPologn">添加多边形</button>
    <div class="map-container">
      <div class="map" :id="mapId"/>
    </div>
  </div>
</template>

<script>
  import { wgs84ToBd09 } from '@/common/lonlat-convertor';
  import { initMap } from '@/common/ehl-map';

  export default {
    name: 'Ivista',
    data() {
      return {
        mapId: `map${Number.parseInt(Math.random() * 999999, 10)}`,
        map: null,
      };
    },
    mounted() {
      this.$nextTick(() => {
        const map = this.map = initMap(this.mapId, undefined, 20);
        const DMap = window.DMap;
        const point = new DMap.LonLat(106.479563, 29.672264000000002);
        const addressSymble = {
          type: 3,
          // url: '/static/live/auto.png',
          size: new DMap.Size(90, 100),
          offsetType: 'mm',
          borderWidth: 4,
          borderColor: 'red',
          color: 'white',
          opacity: 1,
          markTextColor: '#FFFFFF',
          markTextFontSize: 12,
        };
        const marker = new DMap.Marker(point, addressSymble);
        marker.setDragEvent();
        DMap.$(marker).bind('drag', () => {
          const point = wgs84ToBd09(marker.getLonlat().lon, marker.getLonlat().lat);
          console.log('经纬度：', `${marker.getLonlat().lon},${marker.getLonlat().lat}`);
          console.log('转换为百度坐标：', `${point.lon},${point.lat}`);
        });
        map.addOverlay(marker);

        const points = [{ 'lon': 106.474987, 'lat': 29.675129000000002 }, {
          'lon': 106.47488,
          'lat': 29.673191000000003,
        }, { 'lon': 106.47808500000001, 'lat': 29.672703000000002 }, {
          'lon': 106.4772,
          'lat': 29.675190000000004,
        }, { 'lon': 106.474987, 'lat': 29.675129000000002 }];
        const ps = [];
        for (const p of points.values()) {
          ps.push(new DMap.LonLat(p.lon, p.lat));
        }

        const polygon = new DMap.Polygon(ps, {
          color: 'white',
          fillColor: 'red',
          fillType: 'ForwardDiagonal',
        }); // 添加多边形
        map.addOverlay(polygon);
        polygon.show();
      });
    },
    methods: {
      addPologn() {
        const { map } = this;
        const DMap = window.DMap;
        map.activateTool('POLYGON', function (e, lonlats) {
          map.clearOverlays();
          console.log(JSON.stringify(lonlats));
          const polygon = new DMap.Polygon([{ 'lon': 106.474987, 'lat': 29.675129000000002 }, {
            'lon': 106.47488,
            'lat': 29.673191000000003,
          }, { 'lon': 106.47808500000001, 'lat': 29.672703000000002 }, {
            'lon': 106.4772,
            'lat': 29.675190000000004,
          }, { 'lon': 106.474987, 'lat': 29.675129000000002 }], {
            color: 'white',
            fillColor: 'white',
            fillType: 'ForwardDiagonal',
          }); // 添加多边形
          polygon.setCommonEvent();
          DMap.$(polygon).bind('click', function (e, p) {
            polygon.hide(); // 点击隐藏
            setTimeout(function () {
              polygon.show();
            }, 1000);
          });
          map.addOverlay(polygon);
        });
      },
    },
  };
</script>
